Code Playground

<html>
<head>
  <meta charset="UTF-8">
  <title>Instagram Login</title>
  <link rel="stylesheet" type="text/css" href="index.css">
  <script src="https://kit.fontawesome.com/b4590ed823.js" crossorigin="anonymous"></script>
</head>
<body>

<div id="login">
		<img id="logo" src="https://cdn.pixabay.com/photo/2016/08/15/01/29/instagram-1594387_960_720.png" width="175">
		<form>
			<input type="text" name="username" placeholder="Phone number, username, or email" id="username">
			<input type="password" name="password" placeholder="Password"> <br>
			<button class="blue-btn" type="button" disabled>Log In</button>
		</form>
		<div class="orRow">
			<div class="line"></div>
			<div id="or">OR</div>
			<div class="line"></div>
		</div>
		<a href="#" id="FBLogin"><span class="fab fa-facebook-square"></span>Log in with Facebook</a>
		<div><p id="loginError"></p></div>
		<a href="#" id="forgotPW">Forgot password?</a>
	</div>
	<div id="signup">
		<p>Don't have an account? <a href="#">Sign up</a></p>
	</div>
	<div id="getApp">
		<p>Get the app.</p>
		<div>
			<a href="#"><img src="https://www.instagram.com/static/images/appstore-install-badges/badge_ios_english-en.png/180ae7a0bcf7.png" width="135"></a>
			<a href="#"><img src="https://www.instagram.com/static/images/appstore-install-badges/badge_android_english-en.png/e9cd846dc748.png" width="135"></a>
		</div>
	</div>

<footer>
			<span class="flinks">
				<a href="#">ABOUT US</a>
				<a href="#">SUPPORT</a>
				<a href="#">PRESS</a>
				<a href="#">API</a>
				<a href="#">JOBS</a>
				<a href="#">PRIVACY</a>
				<a href="#">TERMS</a>
				<a href="#">DIRECTORY</a>
				<a href="#">PROFILES</a>
				<a href="#">HASHTAGS</a>
				<a href="#">LANGUAGE</a>
			</span>
			<p class="copyright">© 2019 INSTAGRAM FROM FACEBOOK</p>
		</footer>

body {
	background-color: #fafafa;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;
	font-family: "Segoe UI", Roboto, Helvetica, Arial, sans serif;
}

footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding-bottom: 40px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}

footer a {
	text-decoration: none;
	color: #003569;
	font-size: 0.75rem;
	font-weight: 500;
}

form {
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
}

input {
	width: 80%;
	padding: 10px;
	border: 1px solid #e6e6e6;
	background-color: #fafafa;
	border-radius: 3px;
	margin-bottom: 5px;
}

input::placeholder {
	color: #999;
	font-size: 0.7rem;
}

#login {
	border: 1px solid #e6e6e6;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	flex-flow: column wrap;
	width: 30%;
	min-width: 350px;
}

#signup {
	border: 1px solid #e6e6e6;
	background-color: #ffffff;
	width: 30%;
	min-width: 350px;
	display: flex;
	justify-content: center;
	margin-top: 10px;
	font-weight: 300;
	padding: 15px 0;
	font-size: 0.9rem;
}

#signup a {
	text-decoration: none;
	font-weight: bold;
	color: #3897f0;
}

#or {
	padding: 0 15px;
	font-size: 0.75rem;
	color: #999;
	font-weight: bold;
}

#logo {
	margin: 15px;
}

#FBLogin {
	color: #385185;
	text-decoration: none;
	padding: 0 15px;
	font-weight: 600;
	font-size: 0.9rem;
	margin: 10px;

}

#forgotPW {
	text-decoration: none;
	font-size: 0.75rem;
	color: #385185;
	margin: 10px 0 20px 0;
}

.blue-btn {
	color: white;
	background-color: #3897f0;
	border: none;
	border-radius: 3px;
	width: 80%;
	padding: 7px 0 7px 0;
	font-weight: bold;
}

#getApp {
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	font-size: 0.8rem;
}

#getApp a {
	margin: 2px;
}

#loginError {
	color: red;
	text-align: center;
	font-size: 0.8rem;
	width: 80%;
	margin: auto;
}

.blue-btn:disabled {
	opacity: 0.3;
}

.line {
	height: 1px;
	width: 50%;
	background-color: #e6e6e6;
	display: flex;
	align-self: center;
}

.orRow {
	display: flex;
	width: 80%;
	margin: 10px 0;
}

.fa-facebook-square {
	color: #385185;
	margin-right: 5px;
	font-size: 1.25rem;
}

.copyright {
	color: #999;
	font-size: 0.75rem;
	font-weight: 500;
	margin: 15px;
	display: flex;
	align-items: center;
}

.flinks {
	margin: 15px;
	display: flex;
	align-items: flex-start;
}

.flinks a {
	margin: 5px;
}

Frontend Forever App